<template>
	<view class="content">
		<u-toast ref="uToast" />
		<view class="bg">
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni1eaa20b/201ebcd0-823e-11ea-b244-a9f5e5565f30.jpeg" mode="widthFix"></image>
		</view>
		<view class="header">
			<view class="info" v-if="userinfo">
				<u-gap height="160" bg-color="none"></u-gap>
				<u-avatar size="150" mode="square" :src="userinfo.avatarUrl"></u-avatar>
				<u-gap height="30" bg-color="none"></u-gap>
				<view class="username">{{ userinfo.nickName }}</view>
				<u-gap height="80" bg-color="none"></u-gap>

				<!-- 		<view class="number">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni1eaa20b/af73e260-8393-11ea-8a36-ebb87efcf8c0.gif" mode="widthFix" style=""></image>
					<view class="left">babalala</view>
					<view class="right">baballa</view>
				</view> -->
			</view>
			<view class="login" v-else>
				<u-gap height="160" bg-color="none"></u-gap>
				<view class="username">需要小主登录哦~</view>
				<u-gap height="30" bg-color="none"></u-gap>
				<u-button type="primary" @getuserinfo="getuserinfo" open-type="getUserInfo" size="medium">点击登录</u-button>
			</view>
		</view>
		<u-gap height="90" bg-color="none"></u-gap>
		<u-notice-bar type="primary" mode="vertical" :list="list"></u-notice-bar>
		<u-gap height="20" bg-color="none"></u-gap>
		<view class="meun">
			<u-cell-group>
				<u-cell-item :title-style="{'font-size': '32rpx'}" icon="calendar" title="历史便签" @click="islogin('history')"></u-cell-item>
				<u-cell-item :title-style="{'font-size': '32rpx'}" icon="bookmark" title="未来便签" @click="islogin('future')"></u-cell-item>
				<u-cell-item :title-style="{'font-size': '32rpx'}" icon="integral" title="关于彩签" @click="aboutme"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		uToast
	} from '@/uview/components/u-toast/u-toast.vue';
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				list: ['感谢使用彩签~', '提醒时间仅7天内有效~', 'QQ小程序每天只能提醒一次哦~', '遇到问题请随时我们联系~']
			};
		},

		computed: {
			...mapGetters(['openid', 'userinfo'])
		},
		methods: {
			islogin(type) {
				if (!this.openid) {
					return this.$refs.uToast.show({
						title: '您还没有登录，点击登录一下吧~',
						type: 'primary'
					});
				}
				uni.navigateTo({
					url: `/pages/allMemo/allMemo?type=${type}`
				})
			},
			watchMore(type) {},
			aboutme(){
				uni.navigateTo({
					url:'/pages/about/about'
				})
			}
		}
	};
</script>

<style lang="scss">
	$header-height: 400rpx;

	.content {
		min-height: 100vh;
	}

	.bg {
		width: 100vw;
		position: fixed;
		height: auto;

		image {
			width: 100vw;
		}
	}

	.header {
		padding-top: $page-herder-pading;
		position: relative;
		z-index: 100;
		text-align: center;
		height: $header-height;

		.username {
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.login {}

	.number {
		position: relative;
		background-color: #fff;
		display: flex;

		image {
			position: absolute;
			z-index: 99;
			width: 100vw;
		}
	}
</style>
